<div id="slider1_container_{{ index }}" style="position: relative; top: 0px; left: 0px; width: 800px;
height: 534px; background: black; overflow: hidden;">

<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
    <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
        background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
    </div>
    <div style="position: absolute; display: block; background: url({{ asset('bundles/my_memory/images/jssor/loading.gif') }}) no-repeat center center;
        top: 0px; left: 0px;width: 100%;height:100%;">
    </div>
</div>

<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px;
    height: 456px; overflow: hidden;">
    {% for aryData in aryNewImageList  %}
        <div>
            <img u="image" src="{{ asset(aryData['image_path'] ~ aryData['name']) }}" />
            <img u="thumb" src="{{ asset(aryData['image_path'] ~ 'mini/' ~ aryData['name']) }}" />

            <div u="caption" t="caption-transition-name" style="position: absolute;
            text-align:center; top: 424px; left: 240px; width: 355px;height: 45px;">
                {{ aryData['note'] }}
            </div>
        </div>
    {% endfor %}
</div>

<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
</span>

<!-- Thumbnail Navigator Skin Begin -->
<div u="thumbnavigator" class="jssort01" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: -11px;">
    <!-- Thumbnail Item Skin Begin -->
    <div u="slides" style="cursor: move;">
        <div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
            <div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
            <div class=c>
            </div>
        </div>
    </div>
    <!-- Thumbnail Item Skin End -->
</div>

<!-- Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">responsive carousel</a>
</div>